<script setup>
import { ref, onMounted } from "vue";
import common from "@/api/common.js";
import { showNotify } from "vant";
import { setLocal, getLocal } from "@/utils/cache.js";
import { useRouter } from "vue-router";

let router = useRouter();
let username = ref("");
let password = ref("");
let formRef = ref(null);

let onregist = () => {
  formRef.value.validate().then(() => {
    let parmas = {
      username: username.value,
      password: password.value,
    };
    common.regist(parmas).then((res) => {
      res.code == 200
        ? showNotify({ type: "success", message: `${res.msg}` })
        : showNotify({ type: "danger", message: `${res.msg}` });
    });
  }).catch(() => {
    console.log('表单验证失败');
  });
};

let onlogin = () => {
  formRef.value.validate().then(() => {
    let parmas = {
      username: username.value,
      password: password.value,
    };
    common.login(parmas).then((res) => {
      res.code == 200
        ? (
            showNotify({ type: "success", message: `${res.msg}` }),
            setLocal("token", res.token),
            setLocal("username", username.value),
            router.push({ name: "personal" })
          )
        : showNotify({ type: "danger", message: `${res.msg}` });
    });
  }).catch(() => {
    console.log('表单验证失败');
  });
};

onMounted(() => {
  getLocal("token") && router.push({ name: "personal" });
});
</script>
<template>
  <!-- 使用 Vant 组件重新设计 UI -->
  <div class="login-container">
    <!-- 美化后的登录头部 -->
    <div class="login-header">
      <div class="login-logo">
        <van-icon name="camera" size="48" color="#1989fa" />
      </div>
      <h1 class="login-title">欢迎使用云影</h1>
      <p class="login-subtitle">您的AI云相片管家</p>
      <div class="header-divider"></div>
    </div>
    
    <div class="login-form-wrapper">
      <van-form ref="formRef" class="login-form">
        <div class="form-item">
          <van-field
            v-model="username"
            name="username"
            label="账号"
            placeholder="请输入手机号"
            :rules="[{
              required: true,
              message: '请填写您的账号',
            }, {
              pattern: /^1[3-9]\d{9}$/,
              message: '请输入有效的手机号',
            }]"
          />
        </div>
        
        <div class="form-item">
          <van-field
            v-model="password"
            name="password"
            label="密码"
            placeholder="请输入密码"
            type="password"
            :rules="[{
              required: true,
              message: '请填写您的密码',
            }, {
              min: 6,
              message: '密码长度不能少于6位',
            }]"
          />
        </div>
        
        <div class="form-actions">
          <van-button
            type="primary"
            block
            @click="onlogin"
            class="login-btn"
          >
            登录
          </van-button>
          
          <van-button
            type="default"
            block
            @click="onregist"
            class="register-btn"
          >
            没有账号，立即注册
          </van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>

<style lang="less">
.login-container {
  min-height: 100vh;
  background: url("../../assets/images/login_bg.jpg") no-repeat center center fixed;
  background-size: cover;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  .login-header {
    text-align: center;
    margin-bottom: 40px;
    color: #00ff68;
    padding: 20px;
    // 添加头部动画效果
    animation: fadeInDown 0.6s ease-out;

    .login-logo {
      margin-bottom: 20px;
      // 为logo添加呼吸动画
      animation: pulse 2s infinite;
    }

    .login-title {
      font-size: 32px;
      font-weight: bold;
      margin-bottom: 12px;
      color: #1989fa;
      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      // 文字渐变效果
      background: linear-gradient(135deg, #1989fa, #00ffb3);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    .login-subtitle {
      font-size: 18px;
      color: #00ff68;
      margin-bottom: 15px;
      // 添加文字渐入动画
      animation: fadeIn 1s ease-out 0.3s both;
    }

    .header-divider {
      width: 60px;
      height: 3px;
      background: linear-gradient(90deg, #1989fa, #00ff68);
      margin: 0 auto;
      border-radius: 3px;
      // 下划线动画效果
      animation: slideIn 0.8s ease-out 0.6s both;
    }
  }

  .login-form-wrapper {
    width: 100%;
    max-width: 400px;
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 12px;
    padding: 30px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }

  .login-form {
    /* 表单项目容器 */
    .form-item {
      margin-bottom: 10px;
      min-height: 65px;
    }

    /* 修复表单校验时输入框变高的问题 */
    .van-field {
      // 固定输入框高度
      height: 50px;
      // 关键修改：设置标签宽度
      --van-field-label-width: 60px;
      // 设置标签文字样式
      --van-field-label-font-size: 15px;
      --van-field-label-color: #333;
      --van-field-label-font-weight: 500;
      // 设置输入框文字样式
      --van-field-input-font-size: 15px;
      --van-field-input-color: #333;
      // 设置占位符样式
      --van-field-placeholder-color: #999;

      .van-cell {
        background-color: rgba(255, 255, 255, 0.7);
        border-radius: 8px;
        // 确保输入框主体高度固定
        height: 100%;
        display: flex;
        align-items: center;
        // 调整内容区域的内边距
        padding: 0 15px;
      }

      // 调整标签样式
      .van-field__label {
        // 可选：如果需要进一步自定义标签样式
        text-align: left;
        // 可以添加额外的样式
      }

      // 调整输入区域样式
      .van-field__control {
        // 可选：如果需要进一步自定义输入区域样式
        padding: 0;
        // 可以添加额外的样式
      }

      // 修复校验信息显示不全问题
      .van-field__error-message {
        position: static;
        font-size: 12px;
        color: #f56c6c;
        line-height: 1.2;
        padding: 0;
        z-index: 1;
        /* 确保文本完整显示，自动换行 */
        white-space: normal;
        word-break: break-word;
        display: block;
      }
    }

    .form-actions {
      margin-top: 20px;
      
      .login-btn,
      .register-btn {
        margin-bottom: 15px;
        border-radius: 8px;
        font-size: 16px;
        height: 48px;
      }

      .login-btn {
        background-color: #1989fa;
      }

      .register-btn {
        border: 1px solid #1989fa;
        color: #1989fa;
      }
    }
  }
}

/* 适配小屏幕 */
@media (max-width: 375px) {
  .login-container {
    padding: 15px;

    .login-form-wrapper {
      padding: 20px;
    }

    .login-header {
      margin-bottom: 30px;

      .login-title {
        font-size: 24px;
      }
    }
  }
}

// 添加动画关键帧
@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideIn {
  from {
    width: 0;
    opacity: 0;
  }
  to {
    width: 60px;
    opacity: 1;
  }
}

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.9;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
</style>
